<template>
    <div class="feedback">
        <div class="feed-form">
            <el-form 
                ref="ruleFormRef" 
                :model="ruleForm" 
                :rules="rules" 
                label-width="auto" 
                class="form"
                hide-required-asterisk 
                status-icon>
                <el-form-item label="反馈类型" prop="type">
                    <el-button @click="onTypeClick(1)"  :type="currentType == 1 ?'primary' : ''">功能异常</el-button>
                    <el-button @click="onTypeClick(2)"  :type="currentType == 2 ?'primary' : ''">用户体验</el-button>
                    <el-button @click="onTypeClick(3)"  :type="currentType == 3 ?'primary' : ''">新功能建议</el-button>
                    <el-button @click="onTypeClick(4)"  :type="currentType == 4 ?'primary' : ''">其他</el-button>
                </el-form-item>
                <el-form-item label="内容描述" prop="content">
                    <el-input class="textarea" v-model="ruleForm.content" type="textarea"
                        placeholder="请详细描述您的问题。（添加截图有助于解决您的问题，期待您的反馈）" />
                </el-form-item>
                <el-form-item label="反馈截图" prop="imgs">
                    <el-upload class="uploader" :show-file-list="false" :on-success="handleSuccess">
                        <el-icon size="25" class="upload">
                            <Plus />
                        </el-icon>
                    </el-upload>
                </el-form-item>
                <el-form-item label="联系电话" prop="tel">
                    <el-input class="tel" v-model="ruleForm.tel" placeholder="请输入联系电话" />
                </el-form-item>
                <el-form-item class="form-btn">
                    <el-button class="sure-btn" type="primary" @click="submitForm">提交</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue"
import { ElIcon } from 'element-plus'
import { Plus } from "@element-plus/icons-vue"

const currentType = ref(0)

const ruleForm = reactive({
    type:"",
    content: "",
    imgs:"",
    tel: ""
})

const rules = reactive({
    content: [
        { required: true, message: '必填项，请根据提示填写', trigger: 'blur' },
    ],
    tel: [
        { required: true, message: '必填项，请根据提示填写', trigger: 'blur' },
    ],
    type: [
        { required: true, message: '必填项，请根据提示填写', trigger: 'blur' },
    ],
    imgs: [
        { required: true, message: '必填项，请根据提示填写', trigger: 'blur' },
    ]
})

const submitForm = (ruleFormRef) => {

}

const handleSuccess = (response, uploadFile) => {

}

const onTypeClick = (index) =>{
    currentType.value = index
}

</script>

<style lang="less" scoped>
.feedback{
    height: calc(100vh - 180px);
}
:deep(.is-required .el-form-item__label::after) {
    content: "*";
    color: #ff0000;
    margin-left: 4px;
}

:deep(.el-form-item__content) {
    button {
        flex: 1;
        margin: 0 20px;
    }

    button:first-child {
        margin-left: 0;
    }

    button:last-child {
        margin-right: 0;
    }
}

.feed-form {
    padding: 20px 50px;
    padding-right: 200px;
    padding-bottom: 100px;

    :deep(.el-form-item__content) {
        justify-content: flex-start !important;
    }
}

.upload {
    width: 100px;
    height: 100px;
    background: #f3f4f5;
}

.textarea {
    :deep(.el-textarea__inner) {
        height: 150px;
    }
}

.tel {
    width: 40%;
}

.form-btn {
    :deep(.el-form-item__content){
        justify-content:center !important;
    }
    .sure-btn {
        flex: 0 !important;
    }
}
</style>